<template>
  <button :class="[css.default, {
          [css.primary]: primary,
          [css.disabled]: disabled,
          [css.block]: block,
          [css.border]: border,
          [css.none]: none,
          [css.breath]: breath,
          [css.info]: info,
          [css.warning]: warning,
          [css.favorite]: favorite
        }]" type="button" :disabled="disabled" @click="onClick">
    <slot/>
  </button>
</template>
<script>

export default {
  name: 'r-btn',
  props: {
    primary: {
      type: Boolean
    },
    disabled: {
      type: Boolean
    },
    breath: {
      type: Boolean
    },
    block: {
      type: Boolean
    },
    border: {
      type: Boolean
    },
    none: {
      type: Boolean
    },
    favorite: {
      type: Boolean
    },
    info: {
      type: Boolean
    },
    warning: {
      type: Boolean
    },
    debounce: {
      type: Number,
      default: 200
    }
  },
  data () {
    return {
      lastActiveTime: null
    }
  },
  methods: {
    onClick (event) {
      const {lastActiveTime, debounce} = this
      const now = Date.now()
      if (lastActiveTime && now - lastActiveTime < debounce) {
        event.preventDefault()
        event.stopPropagation()
      } else {
        this.lastActiveTime = now
        this.$emit('click', event)
      }
    }
  }
}
</script>
<style module="css" lang="scss">
  @import "../styles/index";

  .primary {
    color: white;
    background-color: $color-primary;
    border-color: $color-primary;

    &.disabled {
      background-color: $color-disabled;
      color: white;
    }
  }

  .favorite {
    color: white;
    background-color: $color-favorite;
    border-color: $color-favorite;
  }

  .info {
    color: white;
    background-color: $color-info;
    border-color: $color-info;
  }

  .warning {
    color: white;
    background-color: $color-warning;
    border-color: $color-warning;
  }

  .breath {
    margin-left: $breath;
    margin-right: $breath;
  }

  .block {
    font-size: 17px;
    display: block;
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: $line-height * 2;

    &:not(.breath) {
      width: 100%;
    }

    &.breath {
      width: calc(100% - #{$breath * 2});
    }
  }

  .none {
    background-color: transparent;
  }

  .border {
    background-color: white;
    border-color: currentColor;

    &.primary {
      color: $color-primary;
    }

    &.favorite {
      color: $color-favorite;
    }

    &.info {
      color: $color-info;
    }

    &.warning {
      color: $color-warning;
    }

    &::after {
      @extend %pseudo-scale-half;
      border: 1px solid;
      border-radius: $btn-border-radius * 2;
    }

    &.disabled {
      color: $color-disabled;
    }
  }

  .default {
    position: relative;
    box-sizing: border-box;
    border-radius: $btn-border-radius;

    &:not(.border) {
      overflow: hidden;
    }

    &:not(.none) {
      padding: 5px 12px;
    }
  }
</style>
